@import "./variable/variable.less";

.cl-button {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: @buttonFontSize;
    color: @contentColor;
    line-height: 20px;
    padding: 2px 8px;

    background: #ffffff;
    border: 1px solid @frameColor;
    border-radius: 5px;
    box-sizing: border-box;

    cursor: pointer;
    outline: none;
    margin-left: 10px;

    .left {
        width: @buttonIconSize;
        height: @buttonIconSize;
        margin-right: 6px;
    }

    .right {
        width: @buttonAssistIconSize;
        height: @buttonAssistIconSize;
        margin-left: 5px;
    }
}

.cl-button-shadow {
    box-shadow: 0 8px 11px -8px #e5eced;
}

.cl-button-border-primary {
    border: 1px solid @primaryColor;
}

.cl-button-default-status {
    color: @primaryColor;
    .cl-button-border-primary()
}

.cl-button-primary {
    background: @primaryColor;
    color: white;
    .cl-button-border-primary()
}

.cl-button-primary-status {
    background: @primaryAssistColor;
    color: white;
    border: 1px solid @primaryAssistColor;
}

.cl-button-info {
    background: #E7E6E6;
    color: @contentColor;
    border: 1px solid #E7E6E6;
}

.cl-button-info-status {
    background: #ccc;
    color: @contentColor;
    border: 1px solid #ccc;
}

.cl-button-warn {
    color: @warnColor;
}

.cl-button-warn-status {
    color: @warnColor;
    border: 1px solid @warnColor;
}

.cl-button-no-border {
    border: 1px solid white;
}

.cl-button-no-border-status {
    color: @primaryColor;
    border: 1px solid white;
}

.cl-button-medium {
    padding: 4px 10px;
    min-width: 86px;
}

.cl-button-big {
    padding: 6px 10px;
    min-width: 90px;
}
